/**
 * Created by guzhongxi on 2017/4/21.
 */


$(function () {
    //轮播图片自适应
    function resize() {
        //获取页面的宽度
        var window_width = $(window).width();
        var isSmallScreen = window_width < 768;
        //遍历所有的轮播图片
        $("#main_adv > .carousel-inner > .item").each(function (index, item) {
            //设置背景图片
            //如果是小图就设置小图
            var $item = $(item);
            var imageSrc = $item.data(isSmallScreen ? "image-xs" : "image-lg");
            $item.css("backgroundImage", "url('" + imageSrc + "')");
            //当页面变成小图时,在缩小页面,应该让图片等比例变小
            //bootstrap是通过img标签来实现等比例缩放的
            if (isSmallScreen) {
                $item.html("<img src='" + imageSrc + "' alt=''>");
            } else {
                //当页面又变大时,就清空里面的img标签
                $item.empty();
            }
        });
    }

    //trigger当加载这个js文件时触发一次
    $(window).on("resize", resize).trigger("resize");

    //初始化工具提示
    $('[data-toggle="tooltip"]').tooltip();

    //设置产品标签页的横向滚动条
    var $ul = $(".nav-tabs");
    var width = 25;
    $ul.children().each(function (index, item) {
        width += $(item).width()
    });
    if (width > $(window).width()) {
        $ul.css("width", width).parent().css("overflow-x", "scroll");
    }

    //设置新闻文本
    var $title = $("#news .news-title");
    $("#news .nav-pills a").on("click", function () {
        var title = $(this).data("title");
        $title.text(title);
    });

    //获取轮播图对象
    var $carousel = $(".carousel");
    //offset滑动的距离
    var startX, endX, offsetX = 20;
    //判断手指滑动的方向
    //在刚触摸屏幕时获取x的坐标
    $carousel.on("touchstart", function (event) {
        startX = event.originalEvent.touches[0].clientX;
    });
    //获取最后触摸移动的x坐标
    $carousel.on("touchmove", function (event) {
        endX = event.originalEvent.touches[0].clientX;
    });
    //注册触摸结束时间,计算两个x坐标的差值是否大于某个阈值
    $carousel.on("touchend", function () {
        var distance = Math.abs(startX - endX);
        if (distance > offsetX) {
            //通过滑动的方向来控制轮播图滑的方向
            //向左滑,那么就显示下一张,向右,上一张
            $(this).carousel(startX > endX ? "next" : "prev");
        }
    });


});